<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>密码修改</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/add.css">
    <style>
        .password-alert {display: none; margin-top: 10px;}
    </style>
</head>

<body>
<div class="container">
    <div class="form-inline">
        <h2 style="text-align: left; margin-left: 10px;">
            <svg xmlns="http://www.w3.org/2000/svg" width="40" fill="#17a2b8" class="bi bi-shield-lock" viewBox="0 0 16 16">
                <path d="M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z"/>
                <path d="M9.5 6.5a1.5 1.5 0 0 1-1 1.415l.385 1.99a.5.5 0 0 1-.491.595h-.788a.5.5 0 0 1-.49-.595l.384-1.99a1.5 1.5 0 1 1 2-1.415z"/>
            </svg>
            <span>密码修改</span>
        </h2>
    </div>

    <form id="updatePasswordForm">
        <input type="hidden" id="userId" name="id">
        <div class="form-group">
            <label for="username">用户名：</label>
            <input type="text" class="form-control" id="username" name="userName" readonly>
        </div>
        <div class="form-group">
            <label for="newPassword">新密码：</label>
            <input type="password" class="form-control" id="newPassword" name="password" required>
        </div>
        <div class="form-group">
            <label for="confirmPassword">确认密码：</label>
            <input type="password" class="form-control" id="confirmPassword" required>
            <div class="password-alert alert alert-danger"></div>
        </div>
        <div class="form-group" style="text-align: right">
            <button type="button" class="btn btn-info btn-lg" onclick="validateSubmit()">提交</button>
            <button type="button" class="btn btn-secondary btn-lg" onclick="history.back()">返回</button>
        </div>
    </form>
</div>

<script src="js/jquery.min.js"></script>
<script>
    // 初始化用户数据
    $(function(){
        $.ajax({
            type:"get",
            url: "/user/getUserById"+location.search,
            success: function(userInfo) {
                if(userInfo !=null) {
                    $("#username").val(userInfo.userName);
                }else{
                    alert("未获取到该用户")
                }
            }
        });
    });

    // 简化版验证逻辑
    function validateSubmit() {
        const newPwd = $("#newPassword").val();
        const confirmPwd = $("#confirmPassword").val();

        if(newPwd !== confirmPwd) {
            $(".password-alert").text("两次密码不一致").show();
            return;
        }

        if(newPwd.length < 8) {
            $(".password-alert").text("密码至少8位").show();
            return;
        }

        submitUpdate();
    }

    // 提交更新
    function submitUpdate() {
        $.ajax({
            type: "POST",
            url: "/user/updateNormalUserInfoPassword",
            data: $("#updatePasswordForm").serialize(),
            success: function(result) {
                if(result.status=="SUCCESS") {
                    alert("密码更新成功");
                    location.href = "/normal_user_list.html";
                } else {
                    alert("更新失败！");
                }
            }
        });
    }
</script>
</body>
</html>